<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);

onMounted(() => {
  if (chartContainer.value) {
    const myChart = echarts.init(chartContainer.value);

    const option = {
      title: {
        text: '酒店运营数据'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['预订量', '入住率', '退房量', '在线评价数']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '预订量',
          type: 'line',
          data: [200, 230, 250, 260, 280, 300, 320]
        },
        {
          name: '入住率',
          type: 'line',
          data: [70, 72, 75, 76, 78, 80, 82]
        },
        {
          name: '退房量',
          type: 'line',
          data: [100, 110, 120, 125, 130, 135, 140]
        },
        {
          name: '在线评价数',
          type: 'line',
          data: [50, 55, 60, 65, 70, 75, 80]
        }
      ]
    };

    myChart.setOption(option);

    window.addEventListener('resize', () => {
      myChart.resize();
    });

    onUnmounted(() => {
      window.removeEventListener('resize', () => {
        myChart.resize();
      });
    });
  } else {
    console.error('DOM元素未找到');
  }
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>
